
import React, { useState } from 'react'


export default function App() {

    const [name, setName] = useState("") 
    const [text, setText] = useState("") 
    const inputChange = (en) => {
        console.log("########", en.target.value)
        setName(en.target.value)
        setText(en.target.value)
    } 

    const [list, setList] = useState([])

    const Addlist = () => {

        setList([...list, text])
        console.log(list) 
    }
    const delList = (index) => {
        console.log(index)
        let newlist = [...list]
        newlist.splice(index, 1)
        console.log(newlist)
         setList(newlist)
    }
    return (
        <div>
            <h1>state---{name}</h1>
            <input type="text" onChange={inputChange}  value={text}/>
            <button onClick={Addlist}>Add</button>
            <ul>
                {list.map((item, index) =>
                    <li>{item}<button onClick={()=>delList(index)}>del</button></li>
                )}
            </ul>

        </div>
    )
}
